<template>
  <div>
    <header-city></header-city>
    <header-search :cities="cities"></header-search>
    <city-list :hotCities="hotCities" :cities="cities" :letter="letter"></city-list>
    <alphabet @change="handleLetterChange" :cities="cities"></alphabet>
  </div>
</template>

<script>
import { getcity } from "api/index";

import HeaderCity from "./chirdran/HeaderCity";
import HeaderSearch from "./chirdran/Search";
import CityList from "./chirdran/CityList";
import Alphabet from "./chirdran/Alphabet";
export default {
  name: "City",
  components: {
    HeaderCity,
    HeaderSearch,
    CityList,
    Alphabet
  },
  data() {
    return {
      cities: {}, //城市列表
      hotCities: [], //热门城市
      letter: "" //单个字母元素 传递到城市列表组件实现元素滚动
    };
  },
  mounted() {
    getcity().then(res => {
      console.log(res);
      if (res.code == 0) {
        const data = res.data;
        this.cities = data.cities;
        this.hotCities = data.hotCities;
      }
    });
  },
  methods: {
    handleLetterChange(e) {
      this.letter = e;
    }
  }
};
</script>

<style>
</style>